import withLoader from './withLoader';
// import withHover from './withHover';
import useHover from './useHover';

export interface IDogImagesProps {
  data?: string[];
}

function DogImages(props: IDogImagesProps): JSX.Element {
  const { ref: hoverRef, hovering } = useHover();
  return (
    <div ref={hoverRef}>
      {hovering && <div id="hover">Hovering!</div>}
      <div id="list">
        {props.data?.map((dog, index) => (
          <img src={dog} alt="Dog" key={index} />
        ))}
      </div>
    </div>
  );
}

export default withLoader(DogImages, 'https://dog.ceo/api/breed/labrador/images/random/6');
